<template>
    <div class="mui-content">
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div id="user-info" class="user-info">
                        <img :src="userInfo.userImgUrl" alt="">
                        <span>用户名：{{ userInfo.username }}</span>
                    </div>
                </div>
            </div>
        </div>


        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="user-history">
                        <div>
                            <span>7</span>
                            <span>商品收藏</span>
                        </div>
                        <div>
                            <span>5</span>
                            <span>店铺收藏</span>
                        </div>
                        <div>
                            <span>0</span>
                            <span>我的足迹</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mui-card btn danger">
            <div class="mui-card-content">
                <div class="mui-card-content-inner" @click.stop="signOut">
                    切换账号
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import { Toast } from 'mint-ui';
    import cookie from '../../util/cookie.js';
    export default {
        data() {
            return {
                isSignOut : false
            }
        },
        created() {
        },
        methods: {
            // 登出，删除所有关于用户信息的localStorage和cookie,并清除Vuex的购物车信息      
            signOut(){
                cookie.setCookie('token','',-1);
                cookie.setCookie('user-info',this.userInfo,-1);
                localStorage.setItem('user_info', '');
                localStorage.setItem('car', '');
                this.$emit("singout");
                this.$store.commit('clearCarFromSignout');
                console.log('用户登出，已删除所有信息');
            }
        },
        components: {
        },
        props: ['userInfo']
    }
</script>


<style lang="scss" scoped>
    .user-info {
        display: flex;

        img {
            height: 100px;
            width: 100px;
            border-radius: 50%;
        }

        span {
            color: #000000;
            font-size: 20px;
            width: 50%;
            text-align: center;
            margin-top: 10%;
        }
    }

    .user-history{
        display: flex;


        div{
            height: 70px;
            width: 33%;
            text-align: center;
            line-height:25px;
            padding:10px;
            box-sizing: border-box;

            span:first-child{
                font-size: 20px;
                font-weight: bold;
            }

            span:last-child{
                display: block;
                width: 100%;
                
            }
            
            

            span:last-child{
                font-size: 15px;
            }

            
        }

        div:first-child{
            border-right: 1px solid #cccccc;
        }

        div:last-child{
            border-left: 1px solid #cccccc;
        }
    }

    .btn {
        text-align: center;
        transition: 0s;

        .mui-card-content-inner {
            font-size: 24px;
            color: #ffffff;
        }
    }

    .danger {
        background: #ff0000;
    }

    .danger:active {
        background: #b10b0b;
    }
</style>